<!doctype html>
<html lang="">
 <head>
  <meta charset="UTF-8">
  <title>创建新投票 | WeVote</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  	<script src="lib/zepto.js"></script>
  	<script src="new.js"></script>
  	<script src="common.js"></script>
	<link rel="stylesheet" href="common.css">
	<link rel="stylesheet" href="new.css">
	<link rel="stylesheet" href="lib/mobiscroll/mobiscroll.css">
	<script src="lib/mobiscroll/mobiscroll.zepto.js"></script>
	<script src="lib/mobiscroll/mobiscroll.js"></script>
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> -->
 </head>
 <body>

<!-- 微信分享的头图 - 不过好像没用 -->
<div id="image_for_share">
	<img src="img/headimg.png">
</div>

<div id="new">
	<form method="post" id="new-poll" action="http://wechatvote.yishun.co/vote">
	<input type="hidden" name="type" value="1">
	<div id="container">
		<!--  three dots -->
		<div class="nav-dots" id="nav-dots"><span class="single-dot"></span><span class="single-dot"></span><span class="single-dot"></span></div>
		<!-- page body -->
		<div class="swiper-flow" id="swiper-flow">
			<div class="swiper-line" id="swiper-line" style="left:0; transform:translateX(0);">
				<div class="swiper-block"><!--
				-->	<div class="card-shape">
						<div class="head-img"><img src="img/join-head.png"/></div>
						<h3 style="margin-bottom:1.2em;">创建新投票</h3>
						<table class="table-form" id="table-form">
							<tr>
								<th style="padding-top:0.8em; line-height:1.2em;">主题</th>
								<td><input type="text" id="poll-title" name="theme" placeholder="投票主题(20字以内 必填)"><p id="notice_theme" class="form-notice"></p></td>
							</tr>
							<tr class="blank-row">
								<th></th>
								<td></td>
							</tr>
							<tr>
								<th>简介</th>
								<td>
									<textarea name="theme_description" rows="4" id="poll-description" placeholder="投票描述(100字以内 选填)" style="resize:vertical; font-size:16px;"></textarea>
									<p id="notice_theme_description" class="form-notice"></p>
								</td>
							</tr>
						</table>
						<div class="step-guide">
							<div class="next-btn-wrap">
								<span class="highlight-btn" onclick="if(formCheck.check.call(formCheck,['theme','theme_description'])) swipeBlock(2)">下一步</span>
							</div>
						</div>
					</div>
				</div><!--

				--><div class="swiper-block">
					<div class="card-shape">
						<div class="head-img"><img src="img/join-head.png"/></div>
						<h3>投票选项</h3>
						<table class="options-form table-form" id="options-form">
							<tr>
								<td class="selcet-box right-float" colspan="3">
									<p class="field-tip">投票类型</p>
									<div class="vote-type-radio">
										<input type="radio" name="vote_type" id="vote_type_1" value="0">
										<label for="vote_type_1">单选</label>
										<input type="radio" name="vote_type" id="vote_type_2" value="1">
										<label for="vote_type_2">多选</label>
										<input type="radio" name="vote_type" id="vote_type_3" value="2" checked>
										<label for="vote_type_3">权重选</label>
									</div>
									<p id="notice_vote_type" class="form-notice"></p>
								</td>
							</tr>
							<tr>
								<th></th>
								<td></td>
								<td></td>
							</tr>
							<tr id="">
								<th class="option-index"></th>
								<td>
									<input type="text" name="option[]" class="option-text">
								</td>
								<td class="close-btn" onclick="delItem(this);">&nbsp;</td>
							</tr>
							<tr id="">
								<th class="option-index"></th>
								<td>
									<input type="text" name="option[]" class="option-text">
								</td>
								<td class="close-btn" onclick="delItem(this);">&nbsp;</td>
							</tr>

							<tr id="option-add-btn">
								<td class="add-btn" onclick="addOption()" colspan="2">添加选项...</td>
								<td class="close-btn" style="visibility:hidden;"></td>
							</tr>
							<tr>
								<td colspan="3"><p id="notice_options" class="form-notice"></p></td>
							</tr>
							<tr id="option-con-0">
								<th class="option-index"></th>
								<td>
									<input type="text" class="option-text">
								</td>
								<td class="close-btn" onclick="delItem(this);">&nbsp;</td>
							</tr>
						</table>
						<div class="step-guide">
							<div class="prev-btn-wrap">
								<span class="highlight-btn disabled" onclick="swipeBlock(1)">上一步</span>
							</div>
							<div class="next-btn-wrap">
								<span class="highlight-btn" onclick="if(formCheck.check.call(formCheck,['vote_type','options'])) swipeBlock(3);">下一步</span>
							</div>
						</div>
						<p class="slide-tip">滑动来返回上一步</p>

					</div>
				</div><!--
				--><div class="swiper-block">
					<div class="card-shape no-bottom-space">
						<div class="head-img"><img src="img/join-head.png"/></div>
						<h3>设定选项</h3>
						<div class="time-picker-tips field-tip">投票持续时间 <small>（时/分/秒）</small></div>
						<div class="time-picker">
							<input type="text" class="float-select" id="poll-timespan">
							<div class="picker-block timed">
								<select name="day" id="poll-timed" class="float-select" onchange="changeNameSpan(this)">
									<option value="" selected>天数
								</select><span class="float-label">天数</span>
							</div>
							<div class="picker-block timeh">
								<select name="hour" id="poll-timeh" class="float-select" onchange="changeNameSpan(this)">
									<option value="" selected>小时
								</select><span class="float-label">小时</span>
							</div>
							<div class="picker-block timem">
								<select name="minute" id="poll-timem" class="float-select" onchange="changeNameSpan(this)">
									<option value="" selected>分钟
								</select><span class="float-label">分钟</span>
							</div>
							<div class="bg-bar"></div>
						</div>
						<p id="notice_time" class="form-notice"></p>

						<div class="setting-table setting_member_uplimit" style="text-align:center;">
							<span class="field-name">投票人数上限</span>
							<span class="field-input">
								<input type="number" min="1" step="1" id="poll-people" class="input" name="member_uplimit" placeholder="选填">
							</span>
							<p id="notice_member_uplimit" class="form-notice"></p>
						</div>

						<table class="setting-table" style="display:none;">
							<!--<tr>
								<td class="field-name">投票人数上限</td>
							</tr>
							<td class="field-input">
								<input type="number" min="1" step="1" id="poll-people" class="input" name="member_uplimit" placeholder="选填">
							</td>-->
							<tr>
								<td class="field-name">投票参加人数提醒</td>
								<td class="field-input">
									<select name="will_notice" id="poll-notice" class="float-select" style="left:0; top:0; width:6em;" onchange="changeNameSpan(this)">
										<option selected value="0">不提醒
										<option value="1">50%提醒
										<option value="1">70%提醒
										<option value="1">90%提醒
										<option value="1">100%提醒
									</select><span class="float-label red-selector">不提醒</span>
								</td>
							</tr>
						</table>

						<div class="checkboxes">
							<label class="switch" style="margin-right:0.6em;" onclick="changeCheckBox(this)"><input type="checkbox">匿名<input type="hidden" name="anonymous" value="0"></label><br>
							<label class="switch checked" onclick="changeCheckBox(this)"><input type="checkbox" checked>投票者可看<input type="hidden" name="is_viewable" value="1"></label>
						</div>

						<div class="step-guide">
							<div class="prev-btn-wrap">
								<span class="highlight-btn disabled" onclick="swipeBlock(2)">上一步</span>
							</div>
						</div>
						<p class="slide-tip">滑动来返回上一步</p>

						<div class="circle-bg">
							<div id="submit-btn" style="text-align:center;">
								<button class="button circle-btn" type="button" onclick="if(formCheck.check.call(formCheck,['day','minute','hour', 'member_uplimit','vote_type','options','will_notice','theme','theme_description'])) submitForm(); else formCheck.showFormCheckErrorMsg();"></button><br>
								<span class="circle-label">新建投票</span>
							</div>
						</div>
						<p class="conspicuous-error" style="font-size:0;">~ 回去检查一下是否填写正确 ~</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	</form>
</div>

<script type="text/javascript">

function getPostData(){//OK
	var rawData = $('#new-poll').serializeArray();
	posData = {};
	//some data
	for(var i=0;i<rawData.length;i++){
		posData[rawData[i].name] = rawData[i].value;
	}
	posData['options'] = [];
	//option content
	/*var optionList = document.getElementById('option-list').getElementsByTagName('li');
	for(var i=0;i<optionList.length;i++){
		var opd = {};
		var inpobj = optionList[i].getElementsByClassName('option-text');
		if(inpobj.length){
			opd.title = inpobj[0].value;
			posData.options.push(opd);
		}
	}*/
	//return
	return posData;
}

function sendData(data){
	var url='';
	postJSON(url,data,postCallback);
}

function postCallback(data,status){
	alert('dfh');
	showShare(data);
}

addEvents();

function showShare(data){
	$('#new').hide();
	$('#share').show();
	var postData = getPostData();
	document.getElementById('share-title').innerHTML = postData.theme;
	//document.getElementById('share-time').innerHTML = postData.day+'分' + postData.hour + postData.minute;

	document.getElementById('share-id').innerHTML = data.id;
	document.getElementById('share-pw').innerHTML = data.password || '';

}

//document.getElementById('submit-btn').onclick = function(){document.getElementById('new-poll').submit();}

</script>


<div class="container" id="share" style="display:none;">
	<div class="card-shape">
		<div class="main">
			<div class="head-img"><img src="img/share-head.png"/></div>
			<h3 class="title" id="share-title">分享投票</h3>
			<time class="time-range" id="share-time">长按选择并复制下面的链接</time>
			<p class="info" style="display:none;">
				<span class="tooltip">房间号</span><br>
				<span class="data" id="share-id">&nbsp;</span>
			</p>
			<p class="info">
				<span class="tooltip">投票链接地址</span><br>
				<input type="text" class="data" id="share-url" onfocus="this.select();">
			</p>
		</div>
	</div>

	<div id="share-btn">
		<span class="circle-btn"></span><br>
		<span class="circle-label">微信分享</span>
	</div>
</div>



<script>
/**** 为分享投票按钮添加事件 ****/
function copyLink(){
	var obj = document.getElementById('share-url');
	obj.select();
	if(document.execCommand('copy')){
		msgbox('投票链接已复制到剪切板，快发送给你的朋友吧');
	}else{
		msgbox('复制失败，请长按复制上面的投票链接');
	}
}

document.getElementById('share-btn').addEventListener('click',function(){
	msgBox.pop({
		title:'分享到微信',
		content:'轻触右上角按钮分享到微信好友或朋友圈',
		buttons:[
			{text:'我知道了',action:'msgBox.hide();'},
			{text:'复制链接(Beta)', action:'msgBox.hide();copyLink();'}
		],
		icon:'information',
	});
});




function padSelect(id,min,max,step,tail){
	var selel = document.getElementById(id);
	for(var i=min;i<=max;i+=step){
		var newOp = document.createElement('option');
		newOp.value = i;
		newOp.innerHTML = i+tail;
		selel.appendChild(newOp);
	}
}

padSelect('poll-timed',0,29,1,'天');
padSelect('poll-timeh',0,23,1,'小时');
padSelect('poll-timem',0,55,1,'分钟');

function changeNameSpan(t){
	console.log(t);
	t.nextSibling.innerHTML = t.selectedOptions[0].innerHTML;
}

document.getElementById('option-con-0').getElementsByClassName('option-text')[0].addEventListener('focus',function(){
	addOption();
});
document.getElementById('option-con-0').getElementsByTagName('td')[0].addEventListener('click',function(){
	addOption();
});

//addOption();

function changeCheckBox(obj){
	var status = obj.getElementsByTagName('input')[0].checked;
	var hiddenField = obj.getElementsByTagName('input')[1];
	if(status){
		obj.className = 'switch checked';
		hiddenField.value = "1";
	}else{
		obj.className = 'switch';
		hiddenField.value = "0";
	}
}

</script>


<script type="text/javascript">


// create a timespan picker
$('#poll-timespan').mobiscroll().timespan({
	theme: 'auto', 
	display: 'bottom',
	wheelOrder: 'dhii',
	steps:[1,1,5],
	maxTime:2591999999,
	minTime:300000,
	setText:'确定',
	cancelText:'取消',
	labels:['', '', '天数', '小时', '分钟', ''],
	onSet:function(e,inst){
		alert('fdghj');
		console.log(inst);
	},
	onSelect:function(e,inst){
		//console.log(inst);
		var wv = inst['_tempWheelArray'];

		var sel = document.getElementById('poll-timed');
		sel.value = wv[0];
		changeNameSpan(sel);

		var sel = document.getElementById('poll-timeh');
		sel.value = wv[1];
		changeNameSpan(sel);

		var sel = document.getElementById('poll-timem');
		sel.value = wv[2];
		changeNameSpan(sel);

	},
});

/******* swiper ********/
var bleo = document.getElementById('swiper-line');
document.getElementById('swiper-line').addEventListener('mousedown',getDragStartPos);
document.body.addEventListener('mouseup',getEndPos);
document.body.addEventListener('mousemove',getDragAction);

document.getElementById('swiper-line').addEventListener('touchstart',getDragStartPos);
document.body.addEventListener('touchend',getEndPos);
document.body.addEventListener('touchmove',getDragAction);


/*** add two option inputbox ***/
//addOption();//addOption();

setDots(1);
swipeBlock(1);

</script>

<!-- CNZZ Status -->
<script src="http://s11.cnzz.com/stat.php?id=1261578070&web_id=1261578070" language="JavaScript"></script>
 
 </body>
</html>